class Progress {
    // 初始化要插入的元素id
    constructor({ progressId, height, left, isDisabled }) {
        this.progressId = progressId
        this.height = height || 8
        this.left = left || 0
        this.errorWidth = this.left === 0 ? 0 : 2
        this.startX = 0 // 按下按钮时的初始位置
        this.isMove = false // 是否移动
        this.initLeft = 0 // 每次按下后的初始距离
        this.handleMousemove = this.handleMousemove.bind(this)
        this.handleMouseup = this.handleMouseup.bind(this)
        this.containerId = 'progress-line'
        this.containerWidth = 0 // 进度条宽度
        this.isDisabled = isDisabled || false // 是否可拖动进度，false 可以，true 不可以
        this.progressBtn = 'progressBtn'
    }

    // 初始化
    init() {
        var html = `
            <div
                id="${this.containerId}"
                style="
                    position: relative;
                    background-color: #eeeeee;
                    border-radius: ${ this.height }px;
                    height: ${ this.height }px;
                "
            >
                <div
                    class="bg-50a5ff"
                    style="
                        width: ${ this.left + this.errorWidth }px;
                        height: ${ this.height }px;
                        border-top-left-radius: ${ this.height }px;
                        border-bottom-left-radius: ${ this.height }px;
                    "
                ></div>

                <div
                    class="bg-f8f8f8 radius-50"
                    id="${ this.progressBtn }"
                    style="
                        width: ${ this.height + 4 }px;
                        height: ${ this.height + 4 }px;
                        border: 2px #cccccc solid;
                        box-sizing: border-box;
                        position: absolute;
                        left: ${ this.left }px;
                        top: -2px;
                        cursor:${ this.isDisabled ? 'not-allowed' : 'pointer' } ;
                    "
                ></div>
            </div>
        `

        document.getElementById(this.progressId).innerHTML = html
        document.getElementById("progressBtn").addEventListener('mousedown', this.handleMousedown.bind(this))
    }

    // 鼠标按下按钮的那一刻的回调函数
    handleMousedown(e) {
        if (this.isDisabled) return
        this.startX = e.clientX
        this.initLeft = JSON.parse(JSON.stringify(this.left))
        this.isMove = true
        var dom = document.getElementById(this.containerId)
        this.containerWidth = dom.offsetWidth
        document.addEventListener('mousemove', this.handleMousemove)
        document.addEventListener('mouseup', this.handleMouseup)
        e.preventDefault()
    }
    
    // 监听移动
    handleMousemove(e) {
        if (this.isMove) {
            var clientX = this.initLeft + (e.clientX - this.startX)
            this.left = clientX < 0 ? 0 : (clientX > this.containerWidth ? this.containerWidth : clientX)
            this.init()
        }

        e.preventDefault()
    }

    // 监听鼠标放开
    handleMouseup(e) {
        this.isMove = false
        document.removeEventListener('mousemove', this.handleMousemove)
        document.removeEventListener('mouseup', this.handleMouseup)
    }
}



